<template>
  <button :class="['my-btn', type]" @click="btnClick($event)">我的按钮</button>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: String,
  },
  methods: {
    btnClick(e) {
      this.$emit("btnClick", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  border: 1px solid #fff;

  &.primary {
    border: 1px solid #fff;
    background-color: lightblue;
    color: #fff;
  }

  &.success {
    border: 1px solid #fff;
    background-color: green;
    color: #fff;
  }

  &.danger {
    border: 1px solid #fff;
    background-color: lightcoral;
    color: #fff;
  }

  &.warning {
    border: 1px solid #fff;
    background-color: lightsalmon;
    color: #fff;
  }
}
</style>
